<!--
* @Name: TableColumn
* @Description: element-plus TableColumn 的 多级表头 公共组件
* @Author: 三咲问道
* @Date: 2024-11-16
-->

<template>
  <el-table-column :label="columnHeader?.label" :prop="columnHeader?.prop" align="center">
    <template v-for="(item,index) in columnHeader.children">
      <TableColumn v-if="item.children && item.children.length" :key="item.id" :columnHeader="item">

        <template v-for="(_,slot) in $slots" :key="slot" #[slot]="slotScope">
          <slot :name="slot" v-bind="slotScope"></slot>
        </template>

      </TableColumn>

      <el-table-column v-else :key="item.id || index" :label="item.label" :prop="item.prop"
                       align="center">

        <template #default="scope">

          <slot :name="item.slotName || item.prop" :scope="scope">
            <el-tooltip v-if="item.overflow" :content="scope.row[`${item.prop}`]" placement="bottom">
              <div class="t-o-e t-l" :class="item.isEvent && 'link'">{{ scope.row[`${item.prop}`] }}</div>
            </el-tooltip>

            <div v-if="!item.overflow" :class="item.isEvent && 'link'">
              {{ scope.row[`${item.prop}`]}}
            </div>
          </slot>

        </template>

      </el-table-column>
    </template>
  </el-table-column>
</template>

<script setup lang="ts">

import {toRefs} from "vue";

const props = defineProps(
    {
      columnHeader: {
        type: Object,
        required: true
      }
    }
)

const {columnHeader} = toRefs(props)


</script>

<style scoped lang="less">

.link {
  color: #409eff;
  cursor: pointer;
}

.t-o-e {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-l {
  text-align: left;
}

</style>